<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
    <!-- <pi-button>PiButton</pi-button> -->
    <p class="p">content</p>
    <el-select v-model="value" class="m-2" placeholder="Select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="value" class="m-2" placeholder="Select" disabled>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-table
      :data="tableData1"
      :span-method="arraySpanMethod"
      style="width: 600px"
      row-key="id"
      stripe
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180"
        resizable
        sortable
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
      >
        <template #default="scope">
          <span v-if="scope.row.isLoadRow" style="color: blue" @click="load">
            加载更多
          </span>
          <span v-if="!scope.row.isLoadRow">
            {{ scope.row.date }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>

      <el-table-column label="状态">
        <el-tag class="ml-2" type="success">状态</el-tag>
      </el-table-column>
      <el-table-column label="状态">
        <el-tag class="ml-2" type="success">状态</el-tag>
      </el-table-column>
      <el-table-column label="状态">
        <el-tag class="ml-2" type="success">状态</el-tag>
      </el-table-column>
      <el-table-column label="状态" fixed="right">
        <el-tag class="ml-2" type="success">状态</el-tag>
      </el-table-column>
      <el-table-column label="状态" fixed="right">
        <el-tag class="ml-2" type="success">状态</el-tag>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style>
.myclass td {
  /* border:1px solid #ccc; */
}
</style>
<script lang="ts">
import { ElButton } from "element-plus";
export default {
  data() {
    return {
      currentPage4: 4,
      pageSize4: 100,
      tableData1: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          hasChildren: true,
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          hasChildren: true,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      childlist: [],
      value :"",
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
    };
  },
  methods: {
    handleCurrentChange: (val: number) => {
      console.log(`current page: ${val}`);
    },
    handleSizeChange: (val: number) => {
      console.log(`${val} items per page`);
    },
    load(tree, treeNode, resolve) {
      console.log("load");
      if (treeNode) {
        this.childlist = [
          {
            id: 31,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            isLoadRow: true,
          },
        ];
        setTimeout(() => {
          // debugger;
          resolve(this.childlist);
        }, 100);
      } else {
        this.childlist.pop();
        let data = [
          {
            id: 311,
            date: "2016-05-02",
            name: "王小虎2",
            address: "上海市普陀区金沙江路 1519 弄2",
          },
          {
            id: 311,
            date: "2016-05-02",
            name: "王小虎2",
            address: "上海市普陀区金沙江路 1519 弄2",
          },
        ];
        data.push({
          isLoadRow: true,
        });
        this.childlist.push(...data);
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (rowIndex === 0) {
        if (columnIndex === 0) {
          return [1, 1];
        }
      }
    },
  },
};
</script>

<style lang="scss">
.p {
  // background: $bg;
}
</style>